<template>
  <div>
    <ElBreadcrumb separator=">">
      <ElBreadcrumbItem>当前：</ElBreadcrumbItem>
      <ElBreadcrumbItem>区域管理</ElBreadcrumbItem>
    </ElBreadcrumb>
    <ElForm inline style="margin-top: 10px">
      <ElFormItem label="区域名称:">
        <ElInput v-model="queryCondition.areaNameLike" style="width: 120px"> </ElInput>
      </ElFormItem>
      <ElFormItem label="区域城市:">
        <ElSelect v-model="queryCondition.cityNameLike">
              <ElOption v-for="(e, i) in incity" :key="i" :label="e.name" :value="e.name"></ElOption>
            </ElSelect>
      </ElFormItem>
      
      <ElFormItem label="地址:">
        <ElInput v-model="queryCondition.addressNameLike"> </ElInput>
      </ElFormItem>
      <ElFormItem label="起始时间:">
        <el-date-picker v-model="queryCondition.minTime" />to
      </ElFormItem>
      <ElFormItem label="结束时间:">
        <el-date-picker v-model="queryCondition.maxTime" />
      </ElFormItem>
      <ElFormItem
        ><ElButton type="primary" @click="queryByCondition()">搜索</ElButton>
        <ElButton type="primary" @click="reset()" plain>刷新</ElButton></ElFormItem
      >
    </ElForm>
    <ElButton @click="$router.push('/insert')" type="success">新增</ElButton>
    <ElTable :data="results">
      <ElTableColumn label="编号" prop="areaCode"></ElTableColumn>
      <ElTableColumn label="区域名称" prop="areaName"> </ElTableColumn>
      <ElTableColumn label="城市">
        <template #default="{ row }">
          <span v-for="(e, i) in deWeight(row.address)" :key="i">{{ e.cityName + ' ' }}</span>
        </template>
      </ElTableColumn>
      <ElTableColumn label="地址">
        <template #default="{ row }">
          <ul>
            <li v-for="(e, i) in row.address" :key="i">
              <span>{{ i + 1 + '.' }}</span
              >{{ e.cityName + '-' + e.addressName }}
            </li>
          </ul>
        </template>
      </ElTableColumn>
      <ElTableColumn label="创建时间">
        <template #default="{ row }">
          <span>{{ time(new Date(row.createTime)) }}</span>
        </template>
      </ElTableColumn>
      <ElTableColumn label="操作区">
        <template #default="{ row }">
          <ElButton @click="ArModify(row.areaCode)" size="small" type="success">编辑</ElButton>
          <ElPopconfirm
            confirm-button-text="是"
            cancel-button-text="否"
            title="确定要删除此条数据吗？"
            @confirm="del(row.areaCode)"
          >
            <template #reference>
              <ElButton size="small" type="danger"
                ><el-icon><DeleteFilled /></el-icon
              ></ElButton>
            </template>
          </ElPopconfirm>
        </template>
      </ElTableColumn>
    </ElTable>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="queryCondition.pageSize"
      @current-change="queryByCondition"
    />
    <AreaModify ref="areamodify" @area-put="reset"></AreaModify>
  </div>
</template>
<script lang="ts">
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
import AreaModify from './AreaModify.vue'
export default {
  name: 'AboutView',
  components: {
    AreaModify: AreaModify
  },
  props: {
    sampleP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      sampleD: 'value',
      queryCondition: {
        areaNameLike: '',
        cityNameLike: '',
        addressNameLike: '',
        minTime: new Date(''),
        maxTime: new Date(''),
        pageNum: 1,
        pageSize: 5
      },
      results: [],
      total: 0,
      incity:[] as Array<any>
    }
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {
    this.reset()
    this.getCity()
  },
  methods: {
    // sampleM() {},
    //向后端发送请求获取表单数组
    async queryByCondition(pageNum?: number) {
      if (pageNum) {
        this.queryCondition.pageNum = pageNum
      }
      await axios({
        method: 'POST',
        url: 'http://127.0.0.1:7003/Area/query',
        data: this.queryCondition
      }).then(
        (res) => {
          this.total = res.data.total
          this.results = res.data.results
          console.log(res.data.results)
        },
        (error) => {
          console.log(error.response.data)
        }
      )
      console.log(this.results)
      console.log(this.total)
    },
    //时间格式化
    time(date: Date) {
      const datec =
        date.getFullYear() +
        '年' +
        (date.getMonth() + 1) +
        '月' +
        date.getDate() +
        '日' +
        date.getHours() +
        '时' +
        date.getMinutes() +
        '分'
      return datec
    },
    //去重函数
    deWeight(arr: any) {
      var temp: any = []
      arr.forEach(function (a: any) {
        var check = temp.every(function (b: any) {
          return a.cityName !== b.cityName
        })
        check ? temp.push(a) : ''
      })
      return temp
    },
    //刷新
    reset() {
      this.queryCondition = {
        areaNameLike: '',
        cityNameLike: '',
        addressNameLike: '',
        minTime: new Date(''),
        maxTime: new Date(''),
        pageNum: 1,
        pageSize: 5
      }
      this.queryByCondition()
    },
    async del(code: string) {
      await axios({
        method: 'DELETE',
        url: 'http://127.0.0.1:7003/Area/remove/' + code
      }).then(
        (res) => {
          console.log(res.data)
          ElMessage.success('删除成功')
          this.reset()
        },
        (error) => {
          console.log(error.response.data)
          ElMessage.warning(error.response.data)
        }
      )
    },
    ArModify(code:string){
      const areamodify:any = this.$refs.areamodify
      areamodify.open(code)
      areamodify.mcity=this.incity
    },
    async getCity() {
      await axios({
        method: 'GET',
        url: 'http://127.0.0.1:7003/city/query'
      }).then(
        (res) => {
          console.log(res.data)
          this.incity = res.data
        },
        (error) => {
          console.log(error.response.data)
        }
      )
    }
  },
  watch: {
    // sampleP(n, o) {},
  }
}
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
